<template>
	<view class="sbody">
		<!-- 缴费查询 -->
		<view class="sbody"  v-if="userId != null && userId != ''">
			<view class="authBody" style="height: 25%;">
				<view style="padding-left: 5%;font-weight: bold;">查询待缴订单</view>
				<view class="property_wattanty_date_line">
					<view class="property_wattanty_date">
						<picker mode="date" :value="startDate" @change="bindDateChange($event,'startDate')">
							<view v-if="startDate!=''">{{startDate}}</view>
							<view v-else>请选择开始时间</view>
						</picker>
					</view>
					<view style="padding-top: 10px;padding-bottom: 10px;">至</view>
					<view class="property_wattanty_date">
						<picker mode="date" :value="endDate" @change="bindDateChange($event,'endDate')">
							<view v-if="endDate!=''">{{endDate}}</view>
							<view v-else>请选择结束时间</view>
						</picker>
					</view>
				</view>

				<button type="default" @click="fnQuery">立即查询</button>
			</view>

			<!-- 待缴费订单 -->
			<view class="authBody" style="height: 62%;margin-top: 2%;">
				<view class="property_wattanty_line" v-for="(item,index) in unPayList" :key="index">
					<view style="font-size: 12px;">
						<checkbox-group>
							<label :class="!item.checked?'radio':'radio checked_radio_checked'">
								<checkbox class="line_check_box" :checked="item.checked" :value="item.payId"
									@click="changeChecked(index)" color="#1884eb" />
								<text v-for="typeItem,index in typeOptions">
									<text v-if="typeItem.dictValue == item.ruleType">【{{typeOptions[index].dictLabel}}】
									</text>
								</text>
								<text v-if="item.payOrder != null">{{item.payOrder}}</text>
								<text v-else></text>
							</label>
						</checkbox-group>
					</view>
					<view style="color: red;font-size: 12px;">￥ {{item.unpaid}}</view>
				</view>

				<button type="default" @click="fnPay" style="background-color: #dfa848;">立即支付</button>

			</view>

			<!-- 支付弹出框 -->
			<uni-popup class="finish-popup" ref="popup" type="center" @change="sum=0">
				<view class="popup-box">
					<view style="font-weight: bold;font-size: 16px;">确认支付</view>
					<view class="property_wattanty_line" style="width: 81%;margin-top: 10px;">
						<view>订单号:</view>
						<view style="color: grey;">2021/08/06</view>
					</view>
					<view class="pay_pop">
						<view class="property_wattanty_line" v-for="(item,index) in checkedPayList" :key="index">
							<view>
								<text v-for="typeItem,index in typeOptions">
									<text v-if="typeItem.dictValue == item.ruleType">【{{typeOptions[index].dictLabel}}】
									</text>
								</text>
							</view>
							<view style="color: red;">￥ {{item.unpaid}}</view>
						</view>
					</view>
					<view class="property_wattanty_line" style="width: 81%;margin-top: 10px;">
						<view>总计</view>
						<view style="color: red;">￥ {{sum}}</view>
					</view>
					<button type="default" @click="fnConfirmPay">确认支付</button>
				</view>
			</uni-popup>
		</view>
		<view class="authBody_else" v-else>
			<view class="authBody_item">
				<view class="qrCodeNoPermission"></view>
				<view class="qrbottom">
					<view class="qrbottom_prompt">暂无权限,请联系管理员审核!</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import hTimePicker from '@/components/h-timePicker/h-timePicker.vue';
	import {
		listPayRecord,
		updatePayRecord
	} from '@/common/js/api/payRecord.js';
	import {
		payOrder,
		payMent,
		payResult
	} from '@/common/js/api/pay.js';
	import {
		addDateRange
	} from '@/common/js/utils/project.js';
	import {
		getDicts
	} from '@/common/js/api/dict/data.js';
	import {
		selectDictLabel
	} from '@/common/js/utils/project.js'

	export default {
		components: {
			hTimePicker
		},
		data() {
			return {
				//开始时间
				startDate: '',
				//结束时间
				endDate: '',
				//待缴费订单
				unPayList: [],
				//当前需要支付的订单列表
				checkedPayList: [],
				//用户基本信息
				userInfo: [],
				//总计
				sum: 0,
				//缴费类型字典
				typeOptions: [],
				WxPayInfo: {
					userId: '',
					payAmount: '',
					outTradeNo: ''
				},
				//限制重复提交
				changeClick: true,
				//用户id
				userId: "",
			}
		},
		onLoad() {
			//获取用户基本信息
			this.userInfo = uni.getStorageSync("userInfo")
			this.userId = this.userInfo.sysUser.userId
			console.log(this.userInfo);
			this.WxPayInfo.userId = this.userInfo.userId
		},
		methods: {
			//根据选择时间段查询缴费情况
			getRecordByTime() {
				if (this.changeClick) {
					this.changeClick = false
					this.unPayList = []
					var paramter = {
						'beginDate': this.startDate,
						'endDate': this.endDate
					};
					var query = {
						'userId': this.userInfo.sysUser.userId,
						'params': paramter
					};
					listPayRecord(query).then(res => {
						var newList = res.rows
						for (let i in newList) {
							if (newList[i].payStatus == 2) {
								this.unPayList.push(newList[i])
							}
						}
						this.changeClick = true
					})
					getDicts('t_rule_type').then(res => {
						this.typeOptions = res.data
						console.log(res.data)
					})
				} else {
					uni.showToast({
						title: "请不要重复提交",
						icon: 'none',
						duration: 2000
					})
				}
			},
			bindDateChange(e, filed) {
				if (filed == 'startDate') {
					this.startDate = e.target.value
				} else {
					this.endDate = e.target.value
				}
				console.log(e)

			},
			//立刻查询
			fnQuery() {
				//获取日期范围内的所有待缴费订单
				this.getRecordByTime()
			},
			//立刻支付
			fnPay() {
				//筛选所有选中的数据
				let arr = []
				this.unPayList.forEach((item) => {
					if (item.checked) {
						arr.push(item)
					}
				})
				this.checkedPayList = arr
				console.log(this.checkedPayList.length < 1)
				if (this.checkedPayList.length < 1) {
					//提示需要选中
					uni.showToast({
						title: "请选择需缴费的记录",
						icon: 'none',
						duration: 2000
					})
				} else {
					this.$nextTick(function() {
						this.$refs.popup.open()
						arr.forEach((item) => {
							this.sum += item.unpaid
						})
					})
				}
			},
			//支付下单
			fnConfirmPay() {
				this.WxPayInfo.payAmount = this.sum
				payOrder(this.WxPayInfo).then(res => {
					if (res.code === 200) {
						this.fnPayMent(res)
					}
				})
			},
			//唤起支付
			fnPayMent(query) {
				//唤起支付界面
				payMent(query)
				//轮询支付结果
				this.WxPayInfo.outTradeNo = query.data.out_trade_no
				let that = this
				var timer = setInterval(function() {
					console.log(query);
					payResult(that.WxPayInfo).then(res => {
						if (res.code === 200) {
							console.log(res);
							if (res.msg === "SUCCESS") {
								clearInterval(timer);
								//支付成功，业务操作
								that.updatePay()
							} else if (res.msg === "FAIL") {
								clearInterval(timer);
								uni.showToast({
									title: '支付失败',
									mask: true,
									icon: "error",
									duration: 2000,
								});
							}
						}
					})
				}, 500);
				//3分钟关闭轮询
				setTimeout(function() {
					clearInterval(timer);
				}, 180000);
			},
			//支付成功、修改支付数据
			updatePay() {
				let Things = this.checkedPayList
				for (var i = 0; i < Things.length; i++) {
					Things[i].payStatus = 0
					Things[i].unpaid = 0
					updatePayRecord(Things[i])
				}
				let that = this
				uni.showToast({
					title: '支付完成',
					duration: 2000,
					success: function() {
						setTimeout(function() {
							//要延时执行的代码
							that.refresh()
						}, 3000) //延迟时间
					},
				});
			},

			//查询支付结果
			//刷新页面
			refresh() {
				uni.redirectTo({
					url: '/pages/propertyPayment/propertyPayment'
				});
			},
			changeChecked(index) {
				this.unPayList[index].checked = !this.unPayList[index].checked
				let arr = []
				//将点击的数据存入新建的数据库中
				this.unPayList.forEach((item) => {
					if (item.checked != undefined && item.checked) {
						arr.push(item)
					}
				})
				this.checkedPayList = arr
			},
		},
	}
</script>

<style>
	@import url("/static/font/iconfont.css");
</style>
<style lang="scss" scoped>
	.popup-box {
		padding-top: 20px;
		text-align: center;
		background-color: #fff;
		border-radius: 10rpx;
		font-size: 28rpx;
		width: 80vw;
		height: 50vh;
	}

	.pay_pop {
		height: 30%;
		border-bottom: medium dotted #d2d2d2;
		width: 90%;
		margin: auto;
		overflow-y: scroll;
		padding-bottom: 10px;
	}

	.property_wattanty_date_line {
		display: flex;
		width: 90%;
		margin: auto;
		justify-content: space-around;
		color: grey;
	}

	.property_wattanty_date {
		border-bottom: 1px solid #eee;
		width: 40%;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
	}



	.checked_radio_checked {
		color: #1884eb;
	}


	.property_wattanty_remark {
		width: 86%;
		height: 20%;
		background-color: #eeeeee;
		margin: auto;
		margin-top: 25px;
		border-radius: 5px;
		padding: 10px;
		font-size: 12px;
	}

	// 单行预约信息
	.property_wattanty_line {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		line-height: 30px;
		width: 90%;
		margin: auto;
	}

	.authBody {
		position: relative;
		width: 90%;
		margin: auto;
		height: 90%;
		border-radius: 10px;
		background-color: white;
		box-shadow: 0px 5upx 5upx #999999;
		padding-top: 20px;
		font-size: 12px;
	}

	.qrCodeNoPermission {
		width: 80%;
		padding-bottom: 80%;
		margin: 0 auto;
		background-image: url(http://101.206.123.213:7051/static/image/common/noPermission.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.qrbottom {
		text-align: center;
		width: 90%;
		margin: 0 auto;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 24rpx;
	}

	.qrbottom_prompt {
		font-weight: bold;
		font-size: 40rpx;
	}

	.authBody_else {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.authBody_item {
		width: 90%;
		height: 90%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		background-color: white;
		box-shadow: 0px 5upx 5upx #999999;
	}


	.sbody {
		height: 100vh;
		background: url("http://101.206.123.213:7051/static/image/common/pic-background.png");
		background-size: cover;
		/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
		background-repeat: no-repeat;
		background-color: white;
	}

	//button样式
	button {
		width: 90%;
		color: white;
		background-color: #1884eb;
		margin-top: 5%;
		position: absolute;
		bottom: 15px;
		left: 5%;
	}

	.line_check_box {
		transform: scale(0.6);
		border-radius: 50px;
	}
</style>
